﻿    <div class="center">
            <label class="label label-success" for="SearchAutoComplete">Search People</label>
            @(Html
            .Kendo()
            .AutoComplete()
            .Name("SearchAutoComplete")
            .DataSource(d =>
                {
                    d.Read(r =>
                    {
                        r.Action("AutoComplete", "Home")
                            .Data("onAdditionalData");
                    })
                    .ServerFiltering(true);                    
                })
            .Filter(FilterType.Contains)
            //.MinLength(3)
            .DataTextField("FullName")
            .Template("<span data-order-id='${ Id }'>${ FullName }</span>")
            .Events(ev =>
                {
                    ev.Select("selectAutoComplete");
                })
                    .Placeholder("Search people").HtmlAttributes(new { name = "SearchAutoComplete" }))
    </div>
    <script>
        window.Search = {
            settings: {
                actionUrl: "/Profile/UserDetails"
            }
        };

        function selectAutoComplete(e) {
            var actionUrl = window.Search.settings.actionUrl;
            var id = e.item.find("span").data("order-id");
            window.location.pathname = actionUrl + "/" + id;
        }
        
        function onAdditionalData() {
            return {
                text: $('#SearchAutoComplete').val(),
            }
        }
    </script>